.my {
    height: 100%;
    background-color: #f3f5f9;

    .my-tit{
        // position: relative;
    }

    .my-con{
        // top: 0;
    }
    .my-icon-bg {
        width: 100%;
        height: auto;
        font-size: 18px;
        overflow: hidden;
        padding: 4vh 5vw;
        background-color: #fff;
        margin-bottom: 10px;

        img,.am-image-picker {
            width: 12vw;
            height: 12vw;
            float: left;
            margin-right: 4.6vw;
            box-shadow: 0 2px #d8d8d8;
            border-radius: 100%;
        }

        .am-image-picker-list{
            padding: 0;
        }
        .am-flexbox-align-center,
        .am-image-picker-item{
            height: 12vw;
            width: 12vw;

            // 重写图片上传按钮的加号
            .am-image-picker-upload-btn{
                background: url('../../assets/svg/header.svg') no-repeat 0px 0px;
                background-size: 100% 100%;
                border: none;

                &::before{
                    background: none;
                }
                &::after{
                    background: none;
                }
            }

            .am-image-picker-item-content{
                background-size: 100% 100%;
            }
        }

        img + div {
            float: left;

            p {
                font-size: 14px;
                color: #868789;
            }
        }

        ul {
            width: 100%;
            height: auto;
            padding: 2.6vh 0vw 0.4vh;
            overflow: auto;
            margin: 0;

            li {
                float: left;
                text-align: center;
                font-size: 14px;
                width: 50%;

                i {
                    display: block;
                    width: 30px;
                    height: 30px;
                    margin: auto;

                    &.addStudent {
                        background: url("../../assets/svg/addStudent.svg") no-repeat 0px 0px;
                        background-size: 100% 100%;
                    }

                    &.underway {
                        background: url("../../assets/svg/underway.svg") no-repeat 0px 0px;
                        background-size: 100% 100%;
                    }

                    &.notes {
                        background: url("../../assets/svg/notes.svg") no-repeat 0px 0px;
                        background-size: 100% 100%;
                    } 
                }

                a{
                    color: #000;
                }
            }
        }
    }

    .childrens-list {
        background-color: #fff;
        padding: 20px;

        h4{
            font-weight: bold;
        }

        li{
            padding: 10px;
            border-bottom: 1px solid #ddd;
            color: #000;
            font-weight: bold;
            overflow: hidden;

            &:last-child{
                border: none;
            }

            a+svg{
                float: right;
            }
        }
    }

    ol.my-list{
        background-color: #fff;
        padding: 0 20px;

        li {
            padding: 2vh 4vw;
            border-bottom: 1px solid #ddd;
            color: #000;
            font-weight: bold;
            overflow: hidden;

            a{
                color: #000;
                display: inline-block;
                width: 100%;
                font-size: 16px;
            }
            
            &:last-child{
                border: none;
            }

            i {
                display: inline-block;
                width: 24px;
                height: 24px;
                margin-right: 10px;
                float: left;

                &.phone{
                    background: url('../../assets/svg/phone.svg') no-repeat 0px 0px;
                    background-size: 100% 100%;
                }

                &.address{
                    background: url('../../assets/svg/address.svg') no-repeat 0px 0px;
                    background-size: 100% 100%;
                }

                &.helps{
                    background: url('../../assets/svg/help.svg') no-repeat 0px 0px;
                    background-size: 100% 100%;
                }

                &.customerService{
                    background: url('../../assets/svg/customerService.svg') no-repeat 0px 0px;
                    background-size: 100% 100%;
                }
            }

            i+span{
                float: left;
                margin-top: 2px;
            }

            i+span+svg:not(:root){
                float: right;
            }
        }
    }
}
